<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>后台管理系统</title>
<%@include file="/WEB-INF/base.jspf"%>
<style>
#test1 {
	margin: 2px;
	height: 37px;
}
	.modal-dialog {
		max-width: 1000px;
	}
#test2 {
	margin: 2px;
	height: 37px;
}

#qblx {
	margin: 2px;
	width:90px;
	height: 37px;
}

#zflx {
	margin: 2px;
	height: 37px;
}
 
 #hymc {
	margin: 2px;
	height: 37px;
} 

#table_id_example_paginate{
 margin-right:100px;
}
.class-input-pageNumber{
    
	width:40px;
	height:23px;
	position: absolute;
	right:65px;
	top:12px;
}
.class-span-searchBtn{
	
	height:24px;
	width:36px;
	font-size:14px;
	text-algin:center;
	line-height:25px;
	padding:0!important;
	position: absolute;
	right:29px;
	top:12px;
}
.dataTables_length{
	margin-top:12px;
	margin-left:50px;
}
.tableSearch{
    position: relative;
}
.layui-inline-sy {
    height:37px;
}
.layui-inline {
	margin-top:15px;
}
.layui-inline-sy.layui-inline-sy-xiala{
    width:95px;
    text-align: center;
}

</style>
</head>
<body class="layui-layout-body">
		<div> 
			<div class="layui-inline">
				<div class="layui-inline">
					<input type="text" id="test2" value="2018-01-29"><br> 
					<input type="text" id="test1" value="2018-03-08">
				</div>
				<div class="layui-inline">
				<input class="layui-inline-sy" type="text" id="hymc-huiyuanzhanghao" placeholder="会员账号">
					<select class="layui-inline-sy layui-inline-sy-xiala" id="qblx-quanbuleixing">
						<option value="">全部类型</option>
						<option value="待开奖">待开奖</option>
						<option value="已中奖">已中奖</option>
						<option value="未中奖">未中奖</option>
						<option value="已撤单">已撤单</option>
						<option value="合买失效">合买失效</option>
						<option value="和局中奖">和局中奖</option>
					</select> 
					<button class="layui-btn layui-btn-radius" id="button-i-searchTableContent">查询</button>
					<button class="layui-btn layui-btn-radius" id="button-i-resetTableContent">重置</button>
					<br> 
					<input class="layui-inline-sy" type="text" id="hymc-touzhuqihao" placeholder="投注期号">
					<input class="layui-inline-sy" type="text" id="hymc-dingdanhao" placeholder="订单号"> 
				</div>
			</div>
				<table id="table_id_example" class="class-tableDataTable class-table-needClick display table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>投注账号</th>
							<th>彩种名称</th>
							<th>期号</th>
							<th>玩法名称</th>
							<th>投注号码</th>
							<th>订单号</th>
							<th>投注时间</th>
							<th>注数</th>
							<th>投注金额</th>
							<th>中奖金额</th> 
							<th>状态</th>  
						</tr>
					</thead>
					<tbody>
						  <c:forEach items="${liuhejl}" var="emp" varStatus="statu">
						  <tr class="danhangsj class-tr-dataTableTr">
							<td class="yid-td">${emp.huiyuanzh}</td>
							<td class="yname-td">${emp.cname}</td>
							<td class="sex-td">${emp.period}</td>
							<td class="phone-td">${emp.cplay}</td>
							<td class="njob-td">${emp.str}</td>
							<td class="njob-td">${emp.ordernum}</td>
							<td class="njob-td">${emp.orderdate}</td>
							<td class="njob-td">${emp.count}</td>
							<td class="njob-td">${emp.acount}</td>
							<td class="njob-td">${emp.money}</td>
							<td class="njob-td">
							<c:if test="${emp.state ==1 }">待开奖</c:if>
							<c:if test="${emp.state ==2 || emp.money==0.00 }">未中奖</c:if>
							<c:if test="${emp.state ==3 && emp.money!=0.00 }">已中奖</c:if>
							</td>
						</tr>
						</c:forEach> 
					</tbody>
				</table>
			</div>
	<script>
		 layui.use('laydate', function() {
			var laydate = layui.laydate;
			//执行一个laydate实例
			laydate.render({
				elem : '#test1' //指定元素
			});
		});
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			//执行一个laydate实例
			laydate.render({
				elem : '#test2' //指定元素
			});
		});
		 function  dataTable01(){
			$("#table_id_example").DataTable({
		      // "bPaginate": true,
		      "bLengthChange": true,      
		      "bSort": false,
		      // "bInfo": true,
		      "bAutoWidth": false,
//		         "bServerSide":true,
		      'aLengthMenu':[10, 20],
		       "searching": true, 
		       "dom": "t<'tableinfo'i<'tableSearch'p>l>",
//		    "searching": true,l
		       "language": {//语言设置  
		            "lengthMenu": "每页显示 _MENU_ 条记录",     
		            "zeroRecords": "没有检索到数据",     
		            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
		            "info": "没有数据",     
		            "oPaginate": {     
		                "sFirst": "首页",     
		                "sPrevious": "前一页",     
		                "sNext": "后一页",     
		                "sLast": "尾页"    
		          	},
		            "search":"",
		            "searchPlaceholder": "请输入关键字",
		            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
		            "infoEmpty":      "没有找到匹配的信息",
		         }
		    })
		}
		 dataTable01();
			var appendNumberToPage = function() {
				var html = 
					"<input type='text' class='class-input-pageNumber input-xs' />"+
						"<span class='class-span-searchBtn btn btn-default btn-xs'>Go</span>"
					var searchDiv = document.querySelectorAll(".tableSearch")
					for (var i = 0; i < searchDiv.length; i++) {
						var item = searchDiv[i]
						item.insertAdjacentHTML("beforeend", html)
					}
				}	
			appendNumberToPage()
			$(".class-span-searchBtn").click(function(){
				var pageNum = Number($(this).siblings(".class-input-pageNumber").val())
				$(this).parents(".tableinfo").siblings(".class-tableDataTable").DataTable().page(pageNum - 1).draw(false)
			});			
			
			$("#button-i-resetTableContent").on("click", function(event) {
				$.fn.dataTable.ext.search.pop()
				$("#table_id_example").DataTable()
				.column(0).search("")
				.column(2).search("")
				.column(5).search("")
				.column(10).search("")
				.draw()
			})
			
			
			$("#button-i-searchTableContent").on("click", function(event) {
				$.fn.dataTable.ext.search.push(
					    function( settings, data, dataIndex ) {
					        var min = Date.parse(new Date(document.querySelector("#test2").value)) / 1000
					        var max = (Date.parse(new Date(document.querySelector("#test1").value)) / 1000) + 86400
					        var date = Date.parse(new Date(data[6])) / 1000 || 0
					        if ( ( isNaN( min ) && isNaN( max ) ) ||
					             ( isNaN( min ) && date <= max ) ||
					             ( min <= date   && isNaN( max ) ) ||
					             ( min <= date   && date <= max ) )
					        {
					            return true;
					        }
					        return false;
					    }
					);				
				$("#table_id_example").DataTable()
				.column(0).search($("#hymc-huiyuanzhanghao").val())
				.column(2).search($("#hymc-touzhuqihao").val())
				.column(5).search($("#hymc-dingdanhao").val())
				.column(10).search($("#qblx-quanbuleixing").val())
				.draw()
				$.fn.dataTable.ext.search.pop()
			})			
			
	</script>
</body>
</html>